
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="container"></div>
</body>
<script src="../move.js" ></script>
<script type="text/javascript">
        function Fire(ops){
            this.x = ops.x;
            this.y = ops.y;
            this.cont = ops.cont;

            this.create();
        }
        Fire.prototype.create = function(){
            this.div = document.createElement("div");
            this.div.className = "fire";
            this.cont.appendChild(this.div);
            this.div.style.background = randomColor();
            this.div.style.left = this.x + "px";
            this.fireMove();
        }
        Fire.prototype.fireMove = function(){
            move(this.div, {
                top: this.y
            },()=>{
                this.div.remove();
                
                var num = random(10,20);
                for(var i=0;i<num;i++){
                    new SmallFire({
                        x:this.x,
                        y:this.y,
                        cont:this.cont
                    });
                }
            })
        }

        function SmallFire(ops){
            this.x = ops.x
            this.y = ops.y;
            this.cont = ops.cont;

            this.create();
        }
        SmallFire.prototype.create = function(){
            this.div = document.createElement("div");
            this.div.className = "small-fire";
            this.cont.appendChild(this.div);
            this.div.style.background = randomColor();
            this.div.style.left = this.x + "px";
            this.div.style.top = this.y + "px";

            this.fireMove();
        }
        SmallFire.prototype.fireMove = function(){
            // 1. 随机横向和纵向的正负的步长
            var speedX = random(-10,10);
            var speedY = random(-20,10);
            // 2. 开启计时器，准备开始运动
            var t = setInterval(() => {
                // 3. 随着时间的流逝，纵向步长不断增加，重力加速
                speedY++;

                // 4. 根据步长设置元素的位置
                this.div.style.left = this.div.offsetLeft + speedX + "px";
                this.div.style.top = this.div.offsetTop + speedY + "px";

                // 5. 判断元素离开了容器之后，删除元素
                if(this.div.offsetTop > this.cont.offsetHeight){
                    this.div.remove()
                }

                // 6. 容器中没有任何元素，清除计时器
                if(this.cont.children.length < 1){
                    clearInterval(t);
                }
            }, 30);
        }

        var ocont = document.getElementById("container");
        ocont.onclick = function(eve){
            var e = eve || window.event;
            new Fire({
                x:e.offsetX,
                y:e.offsetY,
                cont:this
            });
        }
    


    // 随机数功能
    function random(max,min){
        return Math.round(Math.random()*(max-min)+min);
    }
    // 随机颜色功能
    function randomColor(){
        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
    }
</script>
</html>